<template>
  <div class="right-container">
    <a-card class="card">
      <a-dropdown :trigger="['contextmenu']">
        <div :style="{
          textAlign: 'center',
          background: '#f7f7f7',
          height: '200px',
          lineHeight: '200px',
          color: '#777',
        }">
          右键点击这
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item v-for="item in urls" :key="item.key" @click="() => onGo(item.url)">
              {{ item.title }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </a-card>
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const $router = useRouter();
const urls = ref([
  {
    "key": "5.5",
    "title": "svg图标",
    "icon": "menu-huangguan",
    "url": "/common/svgIcon"
  },
  {
    "key": "5.6",
    "title": "生成水印",
    "icon": "menu-huangguan",
    "url": "/common/waterMarker"
  },
  {
    "key": "5.7",
    "title": "生成二维码",
    "icon": "menu-huangguan",
    "url": "/common/qrcode"
  },
  {
    "key": "7.1",
    "title": "404页面",
    "icon": "menu-huangguan",
    "url": "/func/404"
  },
]);
const onGo = (url: string) => {
  $router.push(url);
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.right-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }
}
</style>